<template>
    <div>
        <span class="title1">房源基建 /</span>
        <span class="title2">楼栋管理</span>
        <div class="card"></div>
        <el-card>
            <template>
                <el-row :gutter="10">
                    <el-col :span="4">
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                    <span>
                <el-button type="text" @click="importUser">添加楼栋</el-button>
                </span>
                </el-row></template>
            <el-table
                :data="users"
                stripe
                style="width: 100%">
                <el-table-column
                    label="楼栋名称"
                    prop="name">
                    <template slot-scope="scope">
                        {{scope.row.buildingId}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="楼层数量"
                    prop="job">
                    <template slot-scope="scope">
                        {{scope.row.totalFloor}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="房间类型"
                    prop="build">
                    <template slot-scope="scope">
                        {{scope.row.type}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="房间总数"
                    prop="tel">
                    <template slot-scope="scope">
                        {{scope.row.totalRoom}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="床位总数"
                    prop="time">
                    <template slot-scope="scope">
                        {{scope.row.totalBed}}
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    prop="do"
                    width="180">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)">编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="text"
                            @click="removeBtn(scope.row.buildingId)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                style="margin-top: 20px"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.pageNo"
                :page-sizes="[10, 20, 40, 100]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <UserImportDialog  @ok="getUserList" ref="userEdit"/>
        <UserAddDialog @ok="getUserList" ref="UserAddDialog" />
    </div>
</template>
<script>
import { removeUser, userList } from '../../../../api/third'
import UserImportDialog from './UserImportDialog.vue'
import UserAddDialog from './UserAddDialog.vue'

export default {
  name: 'Third',
  components: { UserAddDialog, UserImportDialog },
  data () {
    return {
      roles: [
        { value: '研究生', label: '研究生' },
        { value: '本科生', label: '本科生' },
        { value: '博士生', label: '博士生' },
        { value: '其他', label: '其他' }
      ],
      query: {
        buildingId: '',
        totalFloor: '',
        type: '',
        object: '',
        sex: '',
        contactWay: '',
        propertyUnit: '',
        residentialManager: '',
        totalRoom: '',
        totalBed: '',
        isDeleted: '',
        teacherName: ''
      },
      total: 0,
      users: [],
      dialogVisible: false
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {
        })
    },
    importUser () {
      // 在这里调用打开添加楼栋对话框的方法
      this.openAddBuildingDialog()
    },
    openAddBuildingDialog () {
      // 调用 UserAddDialog 组件中的 show 方法来显示对话框
      this.$refs.UserAddDialog.show({}, this.roles)
    },
    getUserList () {
      userList(this.query).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    handleSizeChange (value) {
      this.query.pageSize = value
      this.getUserList()
    },
    handleCurrentChange (value) {
      this.query.pageNo = value
      this.getUserList()
    },
    handleEdit (row) {
      this.$refs.userEdit.show(row, this.roles)
    },
    removeBtn (buildingId) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let obj = { buildingId: buildingId }
        removeUser(obj).then(res => {
          if (res.data === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.getUserList()
          } else {
            this.$message({
              message: '删除失败',
              type: 'warning'
            })
          }
        })
      }).catch(() => {
      })
    }/* ,
    addBuilding () {
      // 添加楼栋成功后的处理逻辑
      this.getUserList()
    } */
  },
  created () {
    this.getUserList()
  }
}
</script>
<style scoped>
.title1 {
    color: #808080;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
    padding: 16px;
    line-height: 60px;
}

.title2 {
    color: #1a1a1a;
    font-size: 16px;
    font-face: Source Han Sans CN;
    font-weight: 700;
    letter-spacing: 0;
}

.card {
    margin-left: 20px;
    margin-right: 20px;
}

/deep/ .el-input--inner {
    font-weight: 400;
    font-size: 14px;
    color: #000000e6;
    text-align: left;
    line-height: 22px;
}

/deep/ .el-button--primary, .el-tag {
    background: #166AFF;
    border-radius: 3px;
}

/deep/ .el-button--info {
    border-radius: 3px;
    border: 1px solid #166AFF;
    background: #FFFFFF;
    color: #166AFF;
}

/deep/ .has-gutter {
    background: #F3F3F3;
    font-weight: 400;
    font-size: 14px;
    color: #00000099;
    text-align: left;
    line-height: 22px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    margin-left: 5px;
}

.el-icon-arrow-down {
    font-size: 12px;
}

/deep/ .el-dropdown {
    font-size: 12px;
}

.teamName {
    color: #166AFF;
}

.name1 {
    font-family: "Source Han Sans CN";
    font-weight: 400;
    text-decoration: underline;
    font-size: 14px;
    text-align: left;
    color: #275ce6;
}

::v-deep .name1 {
    .cell {
        font-family: "Source Han Sans CN";
        font-weight: 400;
        text-decoration: underline;
        font-size: 14px;
        text-align: left;
        color: #275ce6;
    }
}

/deep/ .el-button + .el-button, .el-checkbox.is-bordered + .el-checkbox.is-bordered {
    font-family: "Source Han Sans CN";
    font-weight: 400;
    text-decoration: underline;
    font-size: 14px;
    text-align: left;
    color: #F78B89;
}
</style>
